import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '网页的页签栏标题',
    home: Scaffold(
      // 顶部操作栏
      appBar: AppBar(
        title: Text('标题'),
        backgroundColor: Colors.pink,
      ),
      // 配出正文主题部分
      body: Main(),
    ),
  ));
}

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(5),
        // 1. 使用build构造函数
        child: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                // 控制子元素固定排成几列
                crossAxisCount: 3,

                // 设置宽高比例
                childAspectRatio:  4 / 3,
                // 主轴间距
                mainAxisSpacing: 8,
                // 交叉轴间距
                crossAxisSpacing: 10
                
                ),
                children: [
                  Container(child: Text('A'), color: Colors.pink,),
                  Container(child: Text('B'), color: Colors.pink,),
                  Container(child: Text('C'), color: Colors.pink,),
                  Container(child: Text('D'), color: Colors.pink,),
                ],
                
                ));
  }
}
